<template>
    <section class="add-salamen-main base-main bgcFFF">
      <!--图片列表-->
      <div class="img-list">
        <div  v-if="list.length > 1" class="swiper-container pr swiper-container-initialized swiper-container-horizontal">
          <div class="swiper-wrapper">
            <div v-for="(item, index) in list" :key="index" class="swiper-slide">
              <img :src="item.pic" alt="">
            </div>
          </div>
        </div>
        <div class="one-img pr" v-if="list.length > 0 && list.length < 2">
          <img class="absolute-center" :src="list[0].pic" alt="">
        </div>
      </div>
      <!--图片列表-->

      <!--分享按钮-->
      <div class="share-btn-box text-c">
        <p class="color45454D fs16">长按图片或复制链接发送给好友</p>
        <p class="btn-box text-c">
          <span class="base-btn inline-block fs15 colorFFF"
                v-clipboard:copy="url"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError">复制邀请链接</span>
        </p>
      </div>
      <!--分享按钮-->
    </section>
</template>

<script type="text/ecmascript-6">
  import Swiper from 'swiper'
  export default {
    data() {
      return {
        list:[
//          {
//            id:1,
//            pic:'http://pic26.nipic.com/20121222/7447430_112450739000_2.jpg'
//          },
//          {
//            id:2,
//            pic:'http://pic32.nipic.com/20130817/13059650_160858753102_2.jpg'
//          },
//          {
//            id:3,
//            pic:'http://pic23.nipic.com/20120906/10560989_134808169133_2.png'
//          },
//          {
//            id:4,
//            pic:'http://pic21.nipic.com/20120515/9248108_214955703179_2.jpg'
//          },
//          {
//            id:5,
//            pic:'http://pic33.nipic.com/20130910/7219038_100729328122_2.jpg'
//          },
          {
            id:6,
            pic:'http://img4.imgtn.bdimg.com/it/u=2657702358,1424881132&fm=26&gp=0.jpg'
          },
          {
            id:7,
            pic:'http://pic34.nipic.com/20131024/8342527_115035377153_2.jpg'
          }
        ],
        url:'',
      }
    },
    created(){

      this.initData()
    },
    methods: {
      initData(){

      },
      onCopy: function (e) {
        console.log('你刚刚复制: ' + e.text)
      },
      onError: function (e) {
        console.log('无法复制文本！')
      }
    },
    mounted(){
//      window.addEventListener('scroll', this.updateNav);
      new Swiper ('.swiper-container', {
//        direction : 'horizontal',//可设置水平(horizontal)或垂直(vertical)
//        slidesPerView: 1,//同时显示张数
        spaceBetween: 10,//间隔
//        centeredSlides: true,//设定为true时，活动块会居中，而不是默认状态下的居左。
//        pagination: {
////          el: '.swiper-pagination',
////          clickable: true,
//        },
//        loop:true,
//        autoplay:true,//自动滑动

//        autoplay:true,//自动滑动
//        speed:500,//自动滑动开始到结束的时间（单位ms）
        loop:true,//开启循环
        loopedSlides:1,//在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
        slidesPerView:'auto',//设置slider容器能够同时显示的slides数量(carousel模式)。另外，支持'auto'值，会根据容器container的宽度调整slides数目。
        effect:'coverflow',//可以实现3D效果的轮播,
        centeredSlides:true,//设定为true时，active slide会居中，而不是默认状态下的居左。
//        coverflow:{
//          rotate:0,//slide做3d旋转时Y轴的旋转角度。默认50。
//          stretch:100,//每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
//          depth:100,//slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
//          modifier:1,//depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
//          slideShadows:false,//开启slide阴影。默认 true。
//        },
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
      })
    },
  }
</script>

<style lang="scss">
  @import "../../assets/css/base.scss";

  .add-salamen-main{
    /*图片列表*/
    .img-list{
      width: 100%;
      height: 367px;
      padding-top: 40px;

      /*多张图*/
      .swiper-container{
        height:367px;
        width:auto;

        .swiper-slide{
          height: 350px;
          -webkit-transform: scale(1);
          transform: scale(1);
          width: 260px;
        }

        .swiper-slide-active,
        .swiper-slide-duplicate-active {
          height: 367px;
          -webkit-transform: scale(1.3);
          transform: scale(1.3);
        }
      }

      img{
        height: 100%;
        width: 100%;
        /*<!--box-shadow: 0px 4px 8px -1px #E8EAF1;-->*/
        border-radius: 8px;
      }

      /*单张图*/
      .one-img{
        height: 367px;
        width: 100%;

        img{
          width:  260px;
        }
      }
    }
    /*图片列表*/

    /*分享按钮*/
    .share-btn-box{
      margin-top: 32px;

      .btn-box{
        margin-top: 32px;
        width: 100%;
        height: 44px;

        span{
          width: 260px;
          line-height: 44px;
        }
      }

    }
    /*分享按钮*/

    /*iphone6 pro/iphone7 pro*/
    @media screen and (min-width:376px) and (max-width:414px) {
      .img-list{
        padding-top: 80px;
      }

      .share-btn-box{
        margin-top: 64px;
      }
    }

    /*iphone5*/
    @media screen and (max-width: 320px) and (max-height:568px){
        .img-list{
          padding-top: 40px;
          height: 340px;

          .swiper-slide{
            height: 294px !important;
            -webkit-transform: scale(1);
            transform: scale(1);
            width: 160px !important;
          }

          .swiper-slide-active,
          .swiper-slide-duplicate-active {
            height: 305px !important;
            width:  200px !important;

          }
        }

      .share-btn-box{
        margin-top: 0;
      }
    }
  }
</style>
